<!-- 客户详情-客户需求信息与决策流程 -->
<template>
  <div class="client-decision">
    <a-space
      :style="{
        marginBottom: '10px',
      }"
    >
      <a-button
        :style="{
          height: '40px',
        }"
        type="primary"
        @click="isShowModalBtn"
      >
        <template #icon>
          <icon-plus></icon-plus>
        </template>
        <template #default> 新增需求信息 </template>
      </a-button>
    </a-space>
    <tableTurn
      :tableData="getData"
      :args="args"
      ref="tableTurnRef"
      :isShowPagination="false"
    >
      <a-table-column align="center" :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>

      <a-table-column
        :width="400"
        title="需求信息"
        align="center"
        data-index="demandInfo"
      >
      </a-table-column>

      <a-table-column
        :width="400"
        title="决策流程"
        align="center"
        data-index="decision"
      >
      </a-table-column>

      <a-table-column
        :width="400"
        title="需求信息来源"
        align="center"
        data-index="demandInfoSource"
      >
      </a-table-column>

      <a-table-column
        :width="400"
        title="推进关键点"
        align="center"
        data-index="advanceKey"
      >
      </a-table-column>

      <a-table-column
        :width="150"
        data-index="name"
        title="创建人"
        align="center"
      >
      </a-table-column>

      <!-- 操作item -->
      <a-table-column align="center" :width="150" fixed="right" title="操作">
        <template #cell="{ record, rowIndex }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="goDetail(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除">
            <a-popconfirm
              @ok="deleteItem(record.id, rowIndex)"
              content="确定删除吗"
              type="error"
            >
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </tableTurn>
    <addDecisionModal
      v-model:visible="modalVisible"
      @addDecisonEmit="addDecisonEmit"
      :form="currForm"
    >
    </addDecisionModal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { useOrderStore } from '@/store';
  import dayjs from 'dayjs';
  import {
    GetClientDetailTabs,
    PostClientDetailDecision,
    DelClientDetailDecision,
  } from '@/api/order-management/client-management/client-list';
  import addDecisionModal from './components/add-decision-modal/index.vue';

  const route = useRoute();
  const store = useOrderStore();
  let clientId = Number(route.query.id); // 客户id
  let currForm = ref({
    demandInfo: '',
    decision: '',
    customerId: clientId,
    name: store.currClientName,
  }); // 储存要传入弹出框的数据
  // 表格配置
  const args = reactive({
    stripe: true,
    scroll: {
      y: 500,
    },
    bordered: {
      headerCell: true,
    },
  });

  let tableTurnRef = ref(); // 储存table的ref

  const getData = async () => {
    try {
      const res = await GetClientDetailTabs({
        id: clientId,
        typeId: 3,
        pageData: {
          page: 0,
          size: -1,
        },
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let modalVisible = ref(false); // 判断弹出框是否显示

  // 点击按钮弹出框
  const isShowModalBtn = () => {
    currForm.value = {
      demandInfo: '',
      decision: '',
      customerId: clientId,
      name: store.currClientName,
    };
    modalVisible.value = true;
  };

  // 去往编辑页面
  const goDetail = (row: any) => {
    currForm.value = row;
    modalVisible.value = true;
  };

  // 弹出框传回来的保存自定义事件
  const addDecisonEmit = async (form: any) => {
    try {
      // 判断是否有创建时间，如果有则删除不用提交上去
      if (form.createdAt) delete form.createdAt;
      await PostClientDetailDecision(form);
      tableTurnRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 删除
  const deleteItem = async (rowId: number, rowIndex: number) => {
    try {
      await DelClientDetailDecision({
        id: rowId,
      });
      tableTurnRef.value.tableList.splice(rowIndex, 1);
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .client-decision {
    padding: 0px 20px;
  }

  :deep(.arco-space) {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
  }

  :deep(.arco-table) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
</style>
